/*
 * @Author: LGX
 * @Date: 2022-03-30 14:02:11
 * @LastEditors: LGX
 * @LastEditTime: 2022-04-07 10:25:15
 * @FilePath: \erp-management-system\src\components\customerseas\SerchList.jsx
 * @Description: 搜索组件
 * 
 */
import React, { useState } from 'react';
import { Input, Col, Button, Space, Row, Card, Descriptions, Modal } from 'antd';
import { useNavigate, NavLink } from 'react-router-dom'
import { CaretUpOutlined, CaretDownOutlined, SettingOutlined, InfoCircleOutlined, UserOutlined, PlusCircleOutlined } from '@ant-design/icons';
import Search from '../customerseas/Search';
import MyButton from './MyButton';
import IconFont from './IconFont';
import Customfieldss from './Customfield'
import ImportSeas from './importSeas'
import './Seas.moudle.css'
var windowHeight = window.innerHeight
var windowWight = window.innerWidth
const Serch = () => {
    const navigate = useNavigate()
    //导入资源模态框状态
    const [modal1Visible, setModal1Visible] = useState(false)
    //导出资源按钮状态
    const [serchRe, setSerchResult] = useState(false)
    //自定义字段按钮状态
    const [customfields, setCustomfields] = useState(false)
    //展开高级搜索组件
    const search = () => {
        setSerchResult(!serchRe)
    }
    //打开自定义字段
    const Customfield = () => {
        setCustomfields(true)
    }
    //导入资源modal框
    // const showImpModal = () => {
    //     setModal1Visible(true);
    // };
    //导入资源模态框保存按钮
    const handImpleOk = (value,state) => {
        setModal1Visible(false);
        console.log(value,state);
    };
    //导出关闭按钮
    const handleImpCancel = () => {
        setModal1Visible(false);
    };
    //自定义字段按钮事件
    const fieldSave = () => {
        setCustomfields(false)
    }
    const fieldShow = () => {
        setCustomfields(false)
    }
    //定义按钮
    const btnList = [
        {
            id: 0,
            type: 'primary',
            btnName: '公海客户列表',
            to: '/seas/list',
            size: 'middle',
            icon: < UserOutlined />,
        },
        {
            id: 1,
            type: 'primary',
            btnName: '重复数据',
            size: 'middle',
            to: '/seas/audit',
            icon: < InfoCircleOutlined />,
        },
        {
            id: 2,
            type: 'primary',
            btnName: '待审核申请',
            size: 'middle',
            to: '/seas/repeat',
            icon: < SettingOutlined />,
        },
    ]
    return (
        <>
            <Row align='middle' style={{ marginBottom: '10px', alignItems: 'center' }}>
                {/* 左部按钮 */}
                <Col span={14}>
                    <Space size={1}>
                        {
                            btnList.map((item) => {
                                return <NavLink style={{ display: 'inline-block', width: '120px', textAlign: 'center', height: '32px', lineHeight: '32px', borderRadius: '3px' }} key={item.id} to={item.to} className={({ isActive }) => {
                                    return isActive ? 'active_link' : 'base_link'
                                }}>
                                    {item.icon}
                                    {item.btnName}
                                </NavLink>
                            })
                        }
                        <MyButton size='middle' onClick={() => setSerchResult(!serchRe)} color='#5c7b9a' icon={<IconFont type='icon-yunduanxiazai' />} title='导出资源'></MyButton>
                        <MyButton size='middle' color='#5c7b9a' icon={<IconFont type='icon-yunshangchuan_o' />} title='导入资源' onClick={()=>setModal1Visible(true)}></MyButton>
                        <MyButton size='middle' onClick={() => { navigate('/seas/add') }
                        } color='#149e83' icon={<PlusCircleOutlined />} title='新增公海客户'></MyButton>
                    </Space>
                </Col>
                {/* 中间显示客户数量 */}

                {/* </div> */}
                {/* 右边搜索按钮 */}
                <Col span={10} style={{ textAlign: 'right' }}>
                    <Space size='small'>
                        <Col>
                            <MyButton color='#a1a3a5' icon={<SettingOutlined />} onClick={Customfield} title="字段设置"></MyButton>
                        </Col>
                        <Col >
                            <Input placeholder="客户名称、联系人、手机号" />
                        </Col>
                        <Col >
                            <Button size='small' type="primary" style={{ backgroundColor: '#2396b2' }}>搜索</Button>
                        </Col>
                        <Col >
                            <Button size='small' onClick={search} type="primary" style={{ backgroundColor: '#cc2626', border: 'none' }}>高级搜索{serchRe ? <CaretUpOutlined /> : <CaretDownOutlined />}</Button>
                        </Col>
                    </Space>
                </Col>
            </Row>
            <Col offset={9} span={6} style={{ textAlign: 'center' }}>
                客户数量限制：
                <span style={{ color: 'red' }}>2</span> / <span style={{ color: 'red' }} > 无限制</span>
                (申请审核中：1)
            </Col>
            {/* 高级搜索组件 */}
            {serchRe ? <Search /> : ''}
            {/* 导入资源 modal框*/}
            <Modal
                bodyStyle={{ height: '620px' }}
                title="导入资源"
                centered
                destroyOnClose={true}
                confirmLoading={true}
                footer={null}
                width={windowWight * 0.7}
                onOk={handImpleOk}
                onCancel={handleImpCancel}
                visible={modal1Visible}>
                <ImportSeas handImpleOk={handImpleOk} handleImpCancel={handleImpCancel} />
            </Modal>
            {/* 自定义字段 */}
            <Modal
                bodyStyle={{ height: 520, overflowY: 'scroll' }}
                title="自定义字段"
                centered
                width={windowWight * 0.5}
                visible={customfields}
                onOk={fieldSave}
                onCancel={fieldShow}
                okText='确认'
                cancelText='关闭'>
                <div>
                    <Customfieldss />
                </div>
            </Modal>
        </>
    );
}

export default Serch;
